<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>誉禾植物店</title>
  <!-- bootstrap样式 -->
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- element-ui的样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../css/home.css">
  <!-- vue2框架的js和emenet-ui的js -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 可以发送jquery请求 -->
  <script src="../js/jquery.min.js"></script>
  <!-- bootstrap框架 -->
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <!-- 用于发送请求 -->
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- js动画 -->
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
</head>

<body>
  <div id="home">
    <section>
      <el-carousel :interval="5000" arrow="always" height="80vh">
        <el-carousel-item>
          <div style="position: relative;">
            <img src="../img/banner_826s.jpg" height="720px" width="100%" alt="">
            <div class="lunbo_h1" style="position: absolute;top: 12%;left: 20%;">
              <h1>THE</h1>
              <h1>MOST</h1>
              <h1>AMAZING</h1>
              <h1>PLANTS</h1>
            </div>
            <div class="lunbo_div_h2" style="position: absolute; top: 30%; left: 25%; width: 50%;">
              <h1 style="color: #8eb359;font-weight: 600;font-size: 80px;">Spring</h1>
              <h2 style="font-weight: 600;font-size: 40px;padding-left: 8%;margin-top: 3%;">萌肉绿植来袭，准备好了吗？</h2>
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div style="position: relative;">
            <img src="../img/banner2.jpg" height="720px" width="100%" alt="">
            <div class="lunbo_h1" style="position: absolute;top: 12%;left: 20%;">
              <h1>THE</h1>
              <h1>MOST</h1>
              <h1>AMAZING</h1>
              <h1>PLANTS</h1>
            </div>
            <div class="lunbo_div_h2" style="position: absolute; top: 30%; left: 25%; width: 50%;">
              <h1 style="color: #8eb359;font-weight: 600;font-size: 80px;">Spring</h1>
              <h2 style="font-weight: 600;font-size: 40px;padding-left: 8%;margin-top: 3%;">萌肉绿植来袭，准备好了吗？</h2>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </section>
  </div>
</body>
<script>
  new Vue({
    el: '#home',

  })
</script>

</html>